<!-- 点击具体分类后，在主页上展现的的书籍九宫格页面 -->
<template>
  <!-- <div class="books_order">
    <el-link :underline="false">更新时间</el-link>
    <el-link :underline="false">下载量</el-link>
    <el-link :underline="false">推荐量</el-link>
  </div> -->
  <div class="all_box_books">
    <el-row class="books_order_method">
      <span>排序方式： </span>
      <el-button-group>
        <el-button type="info" @click.native="orderByZan">点赞最多</el-button>
        <el-button type="info" @click.native="orderByDownNum">下载最多</el-button>
        <el-button type="info" @click.native="orderByTime">最新</el-button>
      </el-button-group>
    </el-row>

    <br />
    <br />

    <el-row class="books_area">
      <el-col :span="5" :offset="2" v-for="book in allbooklist">

        <el-card shadow="hover">
          <a href="bookdetails" id="to_details">
            <img src="../../../public/images/book10.jpg" class="image" />
            <div class="charactor">
              <span class="book_tittle">{{book.name}}</span>
              <div class="inro">
                <span>{{book.intro}}</span>
              </div>

            </div>
          </a>
          <div class="order_info">
            <el-button-group>
              <el-button type="info" icon="el-icon-caret-top">{{book.zan}}</el-button>
              <el-button type="info" icon="el-icon-download">{{book.downNum}}</el-button>
            </el-button-group>
          </div>
        </el-card>

      </el-col>
    </el-row>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryBooksInfo.pageNum" :page-sizes="[6,9,15,21]" :page-size="queryBooksInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

</template>

<!-- 定义JS变量 -->
<script>
  export default {
    created() {
      this.getallbooklist()
    },
    data() {
      return {
        allbooklist: [{
          faceAddr: '',
          name: '',
          intro: ''
        }],
        queryBooksInfo: {
          query: '', //定义查询参数
          pageNum: 1,
          pageSize: 9
        },
        total: 0
      }
    },
    methods: {
      async getallbooklist() {
        const {
          data: res
        } = await this.$http.get('/book/getallbooklist', {
          params: this.queryBooksInfo
        })
        if (res.status !== 200) return this.$message.error('书籍加载失败')
        console.log(res)
        this.allbooklist = res.data.rows
        this.total = res.data.total
        console.log(this.allbooklist)
      },
      handleSizeChange(size) {
        this.queryBooksInfo.pageSize = size
        this.getallbooklist()
      },
      //页码值变化时 调用
      handleCurrentChange(current) {
        this.queryBooksInfo.pageNum = current
        this.getallbooklist()
      },
      async orderByZan() {
        const {
          data: res
        } = await this.$http.get('/book/getallbooklist1', {
          params: this.queryBooksInfo
        })
        if (res.status !== 200) return this.$message.error('书籍加载失败')
        this.allbooklist = res.data.rows
        this.total = res.data.total
      },
      async orderByDownNum() {
        const {
          data: res
        } = await this.$http.get('/book/getallbooklist2', {
          params: this.queryBooksInfo
        })
        if (res.status !== 200) return this.$message.error('书籍加载失败')
        this.allbooklist = res.data.rows
        this.total = res.data.total
      },
      async orderByTime() {
        const {
          data: res
        } = await this.$http.get('/book/getallbooklist3', {
          params: this.queryBooksInfo
        })
        if (res.status !== 200) return this.$message.error('书籍加载失败')
        this.allbooklist = res.data.rows
        this.total = res.data.total
      }
    }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .all_box_books {
    margin: 0 auto;
    width: 80%;
    backdrop-filter: blur(90px);

    .books_order_method {

      // color: black;
      .el-button-group {
        .el-button {
          color: black;
          background-color: #806d9e;
        }
      }
    }

    .books_area {
      // position: relative;
      margin-bottom: 20px;


      .el-col {
        #to_details {
          text-decoration: none;
        }

        .el-card {
          height: 330px;
          width: 250px;
          position: relative;

          .image {
            // width: 100%;
            width: 80%;
            margin: 0 auto;
            display: block;
          }

          .charactor {
            margin-top: 10px;

            .book_tittle {
              font-size: large;
              font-weight: bold;
            }

            .inro {}

          }

          .order_info {
            position: absolute;
            bottom: 8px;

            .el-button-group {

              .el-button {
                padding: 0;
                width: 105px;
                height: 30px;
                // border: none;
              }
            }
          }
        }
      }
    }
  }
</style>
